<template>
  <div class="content-view">
    <!-- 滑动标题 -->
    <scroll
      :probeType="3"
      :scrollX="true"
      :listenScroll="true"
      ref="subTitleWrapper"
      class="slide-title"
    >
      <ul class="title-content" ref="ulContent">
        <li
          class="title"
          ref="title"
          v-for="(detailItem, index) in categoriesDetailData"
          :key="detailItem.id"
          @click="subTitleClick(index)"
          :class="{ selected: currentTitle === index }"
        >{{detailItem.name}}
      </li>
    </ul>
  </scroll>
    <!-- 下拉菜单 -->
  <div class="show-menu" v-show="isShowDropMenu" @click="showMenu">
    <span class="dowm-menu" v-if="menuDown">
      <svg-icon iconClass="arrow_down" className="icon-arrow"></svg-icon>
    </span>
    <span class="up-menu" v-else>
      <svg-icon iconClass="arrow_up" className="icon-arrow"></svg-icon>
    </span>
  </div>
      <!-- 下拉菜单内容 -->
      <drop-menu
        :menuDown="!menuDown"
        :categoriesDetailData="categoriesDetailData"
        :currentTitle="currentTitle"
        @itemClick="itemClick"
        @touchClick="showMenu"
      />

    <!-- 商品列表内容 -->
    <scroll
      ref="scrollWrap"
      class="product-list"
      :probeType="3"
      :scrollY="true"
      :listenScroll="true"
      :pullup="true"
      @scrollToEnd="scrolToEnd">
      <section ref="productRightList">
      <div
        v-for="(item, index) in categoriesDetailData"
        :key="index"
        class="product-wrapper"
        ref="good"
      >
        <p class="product-category-title">{{item.name}}</p>
        <ul>
          <li
            class="list"
            v-for="(item, index) in item.products"
            :key="index"
            @click.stop="goToGoodsDetail(item)"
          >
            <!-- 商品图片 -->
            <div class="list-item flex">
              <p class="goods-title"> <img v-lazy="item.small_image" alt=""></p>
              <!-- 商品信息 -->
              <div class="goods-info">
                <p class="goods-name">{{item.product_name}}</p>
                <p class="goods-desc">{{item.spec}}</p>
                <p class="price">￥{{item.price}}</p>
                <p class="normal-price">￥{{item.origin_price}}</p>
                <div class="buy-cart"  @click.stop="addToCart(item)">
                  <svg-icon iconClass="buycart_red" className="icon-cart"></svg-icon>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </scroll>
</div>
</template>

<script>
import DropMenu from './DropMenu'
import BScroll from 'better-scroll'
// import Scroll from '../../common/scroll/Scroll'
import { mapGetters, mapMutations } from 'vuex'
import GoodsInfo from '@/assets/js/goodsInfo'
import setSlideWidth from '@/assets/js/setSlideWidth'
export default {
  name: 'ContentView',
  props: {
    categoriesDetailData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // scrollY: 0,
      flag: true,
      value: 0,
      arrLi: 0,
      isShowDropMenu: false,
      menuDown: true,
      currentTitle: 0
    }
  },
  watch: {
    categoriesDetailData () {
      this.currentTitle = 0
      this.menuDown = true
       // 初始化更新滑动组件
      this.$nextTick(() => {
        this._initTitleScroll()
        // this._initProductScroll()
        // 是否显示下拉菜单按钮
        this._isShowDropMenu()
      })
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {
    this.$nextTick(() => {
      // 初始化更新滑动组件
      this._initTitleScroll()
      // this._initProductScroll()
      this._isShowDropMenu()
    })
  },
  components: {
    DropMenu
    // Scroll
  },

  methods: {
    // 滚动标题初始化
    _initTitleScroll () {
      if (this.categoriesDetailData) {
        const ulNode= this.$refs.ulContent
        setSlideWidth(ulNode, 120)
      }
    },

    // 产品列表滚动初始化
    // _initProductScroll () {
    //     // 2.1 进入默认商品列表滚到顶部
    //     // this.$refs.scrollWrap.scrollToElement(this.$refs.good[0])

    // },
    // 如果标题超出则显示下拉框按钮
    showMenu () {
      this.menuDown = !this.menuDown
    },
     // 5.点击下拉菜单
    _isShowDropMenu () {
      let subTitleWrapperWidth = this.$refs.ulContent.parentNode.clientWidth
      let ulContentWidth = this.$refs.ulContent.clientWidth
      this.isShowDropMenu = ulContentWidth > subTitleWrapperWidth ? true : false
    },
    // 点击标题
    subTitleClick (index) {
      this.flag = true
      // 如果蒙版存在就让它消失
      this.menuDown = true
      // 横向滑动到合适的位置
      this.currentTitle = index
      let el = this.$refs.title[index]
      this.$refs.subTitleWrapper.scrollToElement(el, 500)
      this.arrli = index
      this.$refs.scrollWrap.scrollToElement(this.$refs.good[index], 100, 0, 0)
      setTimeout(() => {
        this.flag = false
      }, 100)
    },
    // 6.处理点击蒙版里面的标题
    itemClick (index) {
      this.currentTitle = index
      this.subTitleClick(index)
      // 让蒙版消失
      this.menuDown = false
    },
     // 商品详情页面
    goToGoodsDetail (goods) {
      const goodsInfo = new GoodsInfo(goods)
      this.$router.push({
        name: "GoodsDetail",
        // 给商品详情页面传递数据
        query: {
          ...goodsInfo
        }
      })
    },
    scrolToEnd () {
      this.$toast({
        message: '别拉啦，去看看别的吧！',
        duration: 300
      })
    },
    ...mapMutations({
      addToCart: 'ADD_TO_CART',
      addGoods: 'ADD_GOODS'
    })
  }
}

</script>

<style lang='scss' scoped>
.content-view {
  width: 100%;
  .slide-title {
    position: fixed;
    top: px2rem(49);
    z-index: 999;
    @include setWH(100%,  px2rem(47));
    display: inline-block;
    white-space: nowrap;
    border-bottom: solid px2rem(0.1)#e8e9e8;
    overflow: hidden;
    background-color: $text-color-white;
    .title {
      display: inline-block;
      font-size: px2rem(12);
      padding: px2rem(15.5);
    }
    .selected {
      color: $theme-color-red;
    }
  }
  .show-menu {
    position: fixed;
    right: px2rem(-3);
    z-index: 1999;
    @include setWH(10%, px2rem(43));
    line-height: px2rem(43);
    margin-top: px2rem(1.7);
    background-color: $text-color-white;
    .icon-arrow {
      @include setWH(px2rem(25), px2rem(25));
      vertical-align: middle;
    }
  }
}
.product-list {
  position: absolute;
  left: px2rem(93);
  right: 0;
  top: px2rem(47);
  bottom: 0;
  overflow: hidden;
  // 防止抖动
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  .product-category-title {
    display: inline-block;
    @include setFontColor(px2rem(13), rgb(147, 153, 159));
    padding: px2rem(15);
    border-left: px2rem(3) solid #d9dde1;
    width: 100%;
    background-color: #f3f5f7;
    padding-left: px2rem(5);
  }
  .flex {
    @include flexType(center);
  }
  .list {
    padding: px2rem(6) px2rem(6) 0 px2rem(6);
    img {
      @include setWH(px2rem(71), px2rem(71));
      border-radius: px2rem(0.6);
    }
    .list-item {
      justify-content: flex-start;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      padding-bottom: px2rem(17);
      position: relative;
      .goods-info {
        margin-left: 0.2rem;
        .goods-name {
          @include setFontColor(px2rem(14), rgb(7, 17, 27));
          line-height: px2rem(17);
          margin-bottom: px2rem(3);
        }
        .goods-desc,
        .sale {
          padding: px2rem(3);
          line-height: px2rem(14);
          @include setFontColor(px2rem(11), gray);
          margin-bottom: px2rem(3);
        }
        .sale {
          margin-bottom: 0;
          span {
            margin-left: px2rem(4);
          }
        }
        .price {
          display: inline;
          @include setFontColor(px2rem(13), red);
        }
        .normal-price {
          display: inline;
          padding-left: px2rem(8);
          text-decoration: line-through;
          @include setFontColor(px2rem(12), #b2b2b2);
        }
        .add {
          position: absolute;
          right: 0;
          bottom: px2rem(5);
        }
        .buy-cart {
          position: absolute;
          top: px2rem(58);
          right: px2rem(10);
          width: px2rem(32);
        }
        .icon-cart {
          display: block;
          @include setWH(px2rem(25), px2rem(25));
        }
      }
    }
  }
  .bottom-tip {
    padding-top: px2rem(14);
    @include setFontColor(px2rem(10), $text-color-pl);
    text-align: center;
  }
}
</style>
